<template>
  <div class="rechargeList">
    <ul class="filterBox contentWrap">
      <li>
        <span>API名称：</span>
        <el-select v-model="filterObj.apiName" size="medium" class="inp" placeholder="请选择">
          <el-option label="全部" value="">
          </el-option>
          <el-option label="淘宝" value="1">
          </el-option>
        </el-select>
      </li>
      <li>
        <span>充值日期：</span>
        <el-date-picker v-model="filterObj.time" class="timeInp" size="medium" value-format="yyyy-MM-dd HH:mm:ss" :default-time="['00:00:00', '23:59:59']" type="daterange" range-separator="至" start-placeholder="充值日期" end-placeholder="充值日期">
        </el-date-picker>
      </li>
      <li class="btn">
        <b class="search button-n" @click="search">查询</b>
      </li>
    </ul>
    <noCont v-if="isEmpty"></noCont>
    <div class="tables contentWrap" v-if="!isEmpty">
      <div class="table">
        <el-table :data="tableData" size="small" stripe border>
          <el-table-column prop="name" label="API名称">
          </el-table-column>
          <el-table-column prop="name" label="渠道名称">
          </el-table-column>
          <el-table-column prop="name" label="充值编号">
          </el-table-column>
          <el-table-column prop="name" label="充值金额">
          </el-table-column>
          <el-table-column prop="name" label="充值前金额">
          </el-table-column>
          <el-table-column prop="name" label="充值后金额">
          </el-table-column>
          <el-table-column prop="name" label="转账卡">
          </el-table-column>
          <el-table-column prop="name" label="收款卡">
          </el-table-column>
          <el-table-column prop="name" label="申请时间">
            <template slot-scope="scope">
              <span>{{ scope.row.payTime ? scope.row.payTime.split(' ')[0] : '--' }}</span>
              <br>
              <span>{{ scope.row.payTime ? scope.row.payTime.split(' ')[1] : '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="确认时间">
            <template slot-scope="scope">
              <span>{{ scope.row.payTime ? scope.row.payTime.split(' ')[0] : '--' }}</span>
              <br>
              <span>{{ scope.row.payTime ? scope.row.payTime.split(' ')[1] : '--' }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="充值状态">
          </el-table-column>
          <el-table-column prop="name" label="驳回备注" show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </div>
      <div class="pager">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizeArray" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal">
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script type="text/ecmascript-6">
// import { pageCommon } from '@mixin/pageCommon'
import NoCont from '@base/noCont'
import { mapGetters } from 'vuex'
export default {
  name: 'rechargeList',
  // mixins: [pageCommon],
  components: {
    NoCont
  },
  computed: {
    params () {
      return {

      }
    },
    ...mapGetters([
      'userInfo'
    ])
  },
  data () {
    return {
      apiUrl: '/order/search/getPackageListForPlatform',
      tableData: [{
        name: '大厦大啥大大厦大'
      }],
      filterObj: {
        apiName: '',
        time: ''
      }
    }
  },
  methods: {
    setList (data) {
      this.tableData = data
    }
  }
}
</script>
<style lang="stylus" rel="stylesheet/stylus" scoped>
.rechargeList
  .filterBox
    display flex
    flex-wrap wrap
    margin-bottom 20px
    li
      margin-right 12px
      margin-bottom 12px
      span
        fontSize(14px, 30px, #666666)
    .btn
      display flex
      flex 1
      justify-content flex-end
      align-items center
    .inp
      width 200px
    .timeInp
      width 300px
    b
      margin 0 10px
</style>
